<template>
    <el-table :data="bannerList" style="width: 100%">
        <el-table-column prop="bannerid" label="编号" width="180" />
        <el-table-column label="图片路径" width="180">
            <template #default="scope">
                <img class="img" :src="scope.row.img" />
            </template>
        </el-table-column>
        <el-table-column prop="alt" label="图片提示" width="180" />
        <el-table-column prop="link" label="图片链接" width="180" />
        <el-table-column prop="flag" label="是否启用">
            <template #default="scope">
                <el-switch v-model="scope.row.flag" @change="(val: boolean) => updateBannerFlag(scope.row.bannerid, val)" />
            </template>
        </el-table-column>
        
        <el-table-column label="操作">
      <template #default="scope">
        <el-popconfirm title="亲，您真的要删除吗?" @confirm="deleteBannner(scope.row.bannerid)">
          <template #reference>
            <el-button>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';


import { validate } from "@babel/types";
import { reactive } from "vue"
import service from "../../../utils/service";
interface IBanner {
    link: string,
    img: string,
    alt: string,
    bannerid: string,
    flag: boolean
}

const bannerList = reactive<IBanner[]>([

])

const getBannerList = () => {
    service({
        url: "/banner/list"
    })
        .then((res: any) => {
            if (res.data.code === "200") {
                bannerList.length=0;
                bannerList.push(...res.data.data)
            }
        })
}



const updateBannerFlag = (bannerid: string, val: boolean) => {
    service({
        url: "/banner/updateFlag",
        method: "post",
        data: {
            bannerid: bannerid,
            flag: val
        }
    }).then((res) => {
        if (res.data.code === "200") {
            alert("更新成功");
        }
    })
}
getBannerList();

const deleteBannner = ( bannerid:string) => {
    service({
        url: "/banner/delete",
        params: {
            bannerid
        }
    }).then(res=>{
        if (res.data.code==="200") {
            ElMessage({
            message:"删除成功",
            type:"success"
           })
           getBannerList()
        // let index = bannerList.findIndex(item => item.bannerid === bannerid);
        // bannerList.splice(index, 1);
        }
    })
}
</script>

<style scoped >
.img {
    width: 200px;
    height: 150px;
}
</style>